<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>

</head>
<body>
  <header class="header">
    <div class="sell"></div>
    <div class="top">
        <div class="inner">
            <img class="img"src="../images/logo.png" alt="">
            <label for="">
                <input type="text">
                <a href="#"><img src="../images/so1.png" alt=""></a>
            </label>
            <div class="user">
              <img src="../images/user.jpg" alt="">
            </div>
            <div class="tel">
              <p>呼叫律师团<span>01-14725836</span></p>
            </div>  
        </div>
        <div class="wrap">
              <div class="wnav" style="width:1200px;height:30px;margin:0 auto;position:relative">
                      <div class="nav">
                              <ul class="href">
                                  <li class=""><a href="">首页</a></li>
                                  <li><a href="">企业服务</a></li>
                                  <li><a href="">云小律</a></li>
                                  <li><a href="">云律通媒体</a></li>
                                  <li><a href="">法律助手</a></li>
                                  <li><a href="">控制中心</a></li>
                              </ul>    
                      </div>
              </div> 
              <ol class="s_nav">
                 <li class="qyfw">
                    <ol class="one">
                      <li><a href="#"><img src="../images/qyfw1.png" alt=""><p>合同起草</p></a></li>
                      <li><a href="#"><img src="../images/qyfw2.png" alt=""><p>智能文书生成</p></a></li>
                      <li><a href="#"><img src="../images/qyfw3.png" alt=""><p>合同审查</p></a></li>
                      <li><a href="#"><img src="../images/qyfw4.png" alt=""><p>律师函</p></a></li>
                      <li><a href="#"><img src="../images/qyfw5.png" alt=""><p>诉讼仲裁</p></a></li>
                      <li><a href="#"><img src="../images/qyfw6.png" alt=""><p>在线法务管家</p></a></li>  
                    
                        <li><a href="#"><img src="../images/qyfw7.png" alt=""><p>项目专项法律顾问</p></a></li>
                        <li><a href="#"><img src="../images/qyfw8.png" alt=""><p>常年法律顾问</p></a></li> 
                      </ol>
                  </li>
                  <li class="yxl">
                      <ol class="one">
                          <li><a href="#"><img src="../images/yxl1.png" alt=""><p>合同起草</p></a></li>
                          <li><a href="#"><img src="../images/yxl2.png" alt=""><p>智能文书生成</p></a></li>
                          <li><a href="#"><img src="../images/yxl3.png" alt=""><p>合同审查</p></a></li>
                           
                        </ol>
                  </li> 
                  <li class="flzs">
                      <ol class="one">
                          <li><a href="#"><img src="../images/flzs1.png" alt=""><p>合同起草</p></a></li>
                          <li><a href="#"><img src="../images/flzs2.png" alt=""><p>智能文书生成</p></a></li>
                          <li><a href="#"><img src="../images/flzs3.png" alt=""><p>合同审查</p></a></li>
                          <li><a href="#"><img src="../images/flzs4.png" alt=""><p>合同审查</p></a></li>
                        </ol>
                  </li> 
                  <li class="kzzx">
                      <ol class="one">
                          <li><a href="#"><img src="../images/kzzx1.png" alt=""><p>合同起草</p></a></li>
                          <li><a href="#"><img src="../images/kzzx2.png" alt=""><p>智能文书生成</p></a></li>
                          <li><a href="#"><img src="../images/kzzx3.png" alt=""><p>合同审查</p></a></li>
                          <li><a href="#"><img src="../images/kzzx4.png" alt=""><p>合同审查</p></a></li>
                          <li><a href="#"><img src="../images/kzzx5.png" alt=""><p>合同起草</p></a></li>
                          <li><a href="#"><img src="../images/kzzx6.png" alt=""><p>智能文书生成</p></a></li>
                          <li><a href="#"><img src="../images/kzzx7.png" alt=""><p>合同审查</p></a></li>
                          
                        </ol>
                  </li> 
              </ol>
        </div>
      </div>
     

</header>
<script src="../lib/jquery/jquery-2.1.1.min.js"></script>
<script>
function nav(){
  $('.s_nav .one li').hover(function(){
    var num=($(this).index()+1).toString()+($(this).index()+1).toString();
    var cnum=parseInt(num);
    var name = $(this).parent().parent().attr('class');
    var str='../images/'+name+cnum+'.png';
    $(this).find('img').attr('src',str);
},function(){
  var num=($(this).index()+1).toString();
  var name = $(this).parent().parent().attr('class');
  var cnum=parseInt(num);
  var str='../images/'+name+cnum+'.png';
  $(this).find('img').attr('src',str);
});
// $('.s_nav .two li').hover(function(){
//   if($(this).index()==0){
//     $(this).find('img').attr('src','../../images/qyfw77.png');
//   }else{
//     $(this).find('img').attr('src','../../images/qyfw88.png');
//   }
// },function(){
//   if($(this).index()==0){
//     $(this).find('img').attr('src','../../images/qyfw7.png');
//   }else{
//     $(this).find('img').attr('src','../../images/qyfw8.png');
//   }
// });
$('.s_nav').css('display','none');
$('.s_nav >li').css('display','none');

$('.href li').hover(function(){
  $('.s_nav >li').stop().slideUp();
    $('.s_nav').stop().fadeOut();

  $('.s_nav').stop().fadeIn();
  var index=$(this).index();
  if(index>3){
    index=index-1;
  }
  $('.s_nav>li').eq(index-1).stop().slideDown();
  console.log(index);
},function(){
   
   $('.s_nav').hover(function(){

   },function(){
    $('.s_nav >li').stop().slideUp();
    $('.s_nav').stop().fadeOut();
   });
  // $('.wrap').mouseleave(
  //   function(){
  //     $('.s_nav').stop().slideUp();
  //     $('.s_nav >li').stop().slideUp();
  //   }
  // );
});
$('.href li').hover(function(){
  var that = $(this).index();
  if(that==0||that==3){
    $('.s_nav >li').stop().slideUp();
    $('.s_nav').stop().fadeOut();
  }
});
}
nav();
</script>
</body>
</html>